<template>
    <h2>Child子组件</h2>
    <h3>msg:{{msg}}</h3>
    <button @click="emitHandler('11')">分发事件(父子通信)</button>
    <h3>userAge:{{userAge}}</h3>
    <h3>length:{{length}}</h3>
    <hr>
    <GrandSon></GrandSon>
</template>

<script lang="ts">
    import {defineComponent, Ref, computed, toRef} from 'vue';
    import GrandSon from '@/components/GrandSon.vue';
    function useGetLength(age: Ref) {
        return computed(() => {
            return age.value.toString().length
        })
    }

    export default defineComponent({
        name: 'Child',
        props: ['msg', 'userAge'],
        setup(props, {attrs, slots, emit}) {
            const emitHandler = (v: any) => {
                emit('emitHandler', v)
            }

            const length = useGetLength(toRef(props,'userAge'))
            return {
                emitHandler,
                length
            }
        },
        components:{
            GrandSon
        }
    });
</script>

<style scoped>

</style>